<template>
    <div v-loading="loading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 0.8)">
      <div>
        <el-tag>数据统计</el-tag>
      </div>
      <div class="wrapper">
        <div class="item">
          <div><span>自动化覆盖系统总数</span> : <span>{{systemCount  }}</span></div>
        </div>
        <div class="item">
          <div><span>自动化执行用例总数</span> : <span>{{caseTotalCount}}</span></div>
        </div>
        <div class="item">
          <div><span>自动化通过率</span> : <span>{{(averagePassRate*100).toFixed(2)}}%</span></div>
        </div>
      </div>

      <div> <el-tag>用例总数变化</el-tag></div>
      <div class="echart" id="mychart1" :style="{ width: '98%', height: '250px' }"></div>
      <div><el-tag>通过率</el-tag></div>
      <div class="echart" id="mychart2" :style="{ width: '98%', height: '250px'  }"></div>
      <div><el-tag>最新一次通过率统计</el-tag></div>
      <div style="margin-top: 10px;">
        <el-table
          border
          stripe
          row-id="resourceID"
          row-key="resourceID"
          ref="searchTable"
          :data="tableData"
          highlight-current-row
          class="table temp-table"
          style="width: 100%"
          :max-height="450"
          :header-cell-style="{background:'#F5F5F5'}"
          highlight-hover-row
          @sort-change="schange"
        >
          <el-table-column label="排名" width="50px" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>

          <el-table-column label="系统" width="150px" align="center" prop="systemName"></el-table-column>

          <el-table-column label="测试计划"align="center" prop="testPlanName"></el-table-column>

          <el-table-column label="用例数" width="150px" align="center" prop="caseCount"></el-table-column>

          <el-table-column label="通过率" sortable="custom"  width="100px"  align="center" prop="passRate">
              <template slot-scope="scope">
              <span>{{(scope.row.passRate*100).toFixed(2) }}%</span>
            </template>
          </el-table-column>

          <el-table-column label="责任人"  align="center"  width="100px"  prop="holder"></el-table-column>


          <el-table-column label="详情"  width="200px" align="center">
            <template slot-scope="scope">
              <span style="color: #00b4ff;cursor:pointer;" @click="lookDetail(scope.row)">查看详情</span>
            </template>
          </el-table-column>


        </el-table>

      </div>
      <div>
        <el-pagination
          v-show="pagination.total>0"
          :current-page.sync="pagination.currentPage"
          :page-size.sync="pagination.pageSize"
          :layout="layout"
          :page-sizes="pagination.pageOptions"
          :total="pagination.total"
          v-bind="$attrs"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
</template>

<script>
  import * as echarts from "echarts";
  // const base = "http://192.168.74.103:80"
  import domain from '../../../../domain.js'
  const base = domain.target
  export default {
      name: "dashboard",
      created () {
        console.log("created")
      },
      mounted() {
        console.log("mouted")
        this.getchartsData()
        this.getList()
        // const myChart = echarts.init(document.getElementById("mychart1"));//
        // const myChart2 = echarts.init(document.getElementById("mychart2"));//
        //
        // myChart.setOption(this.option1);// 渲染页面
        // myChart2.setOption(this.option2);// 渲染页面

      },

      data () {
        return {
          loading:false,
          systemCount:0,
          caseTotalCount:0,
          averagePassRate:0,
          tableData:[],
          activeName:"1",
          option1:{
            tooltip:{},
          /*  title:{
              text: "用例总数变化",
              textStyle:{
                fontSize:"14",
                fontWeight:"bolder"
              },
            },*/
            grid:{
              left:'5%',
              width:"90%",
            },
            xAxis: {
              type: 'category',
              data: [], // 后端获取
              // max:7,
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                rotate: -10
              }
            },
            /* legend: {
               data: ['总数',{name:"未关闭",textStyle:{color:"red"}}]//'line2'
             },*/
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                // formatter: '{value} %'
              },
            },
            series: [
              {
                name: '用例总数变化',
                data: [], // 后端获取
                type: 'line',
                color: "#409EFF",
                smooth: true,
                // barWidth :'55px',
                label:{
                  show:true,
                  // rotate:60,
                  position:'top',
                  color:"black"
                },
                lineStyle:{
                  width: 2
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      // formatter: '{c}%'
                    }
                  }
                },
              },
              /* {
                 name: '未关闭',
                 data: [], // 后端获取
                 type: 'bar',
                 color: "lightblue",
                 smooth: true,
                 barWidth :'55px',
                 label:{
                   show:true,
                   // rotate:60,
                   position:'top',
                   color:"black"
                 },
                 // lineStyle:{
                 //   width: 2,
                 //   color:"red"
                 // },
                 itemStyle: {
                   color:"red"
                 },
               },*/
            ],
         /*   dataZoom: [
              {
                show: true,
                height: 5,
                xAxisIndex: [0],
                bottom: 20,
                showDetail: false,
                showDataShadow: false,
                borderColor: "transparent",
                textStyle: {
                  fontSize: 0
                },
                // startValue:1,
                endValue: 10,//从0开始的相当于5个
                backgroundColor: "rgba(0,0,0,0)",
                borderWidth: 0,
                handleSize: "0%",
                handleStyle: {
                  color: "#d3dee5"
                }
              }
            ]*/

          },
          option2:{
            tooltip:{},
          /*  title:{
              text: "系统总数",
              textStyle:{
                fontSize:"14",
                fontWeight:"bolder"
              },
            },*/
            grid:{
              left:'5%',
              width:"90%",
            },
            xAxis: {
              type: 'category',
              data: [], // 后端获取

              // max:7,
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                rotate: -10
              }
            },
            /* legend: {
               data: ['自动化执行次数']//'line2'
             },*/
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: function (value) {
                  // 将小数转换为百分比，保留两位小数
                  console.log("value",value)
                  return (value)+ '%';
                }
              }
            },
            series: [
              {
                name: '系统总数',
                data: [], // 后端获取
                type: 'line',
                color: "#409EFF",
                smooth: true,
                // barWidth :'55px',
                label:{
                  show:true,
                  // rotate:60,
                  position:'top',
                  color:"black"
                },
                lineStyle:{
                  width: 2
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      formatter: '{c}%'
                    }
                  }
                },
              },
              /* {
                 name: '自动化用例总数',
                 data: [], // 后端获取
                 type: 'line',
                 color: "lightblue",
                 smooth: true,
                 label:{
                   show:true,
                   // rotate:60,
                   position:'top',
                   color:"black"
                 },
                 lineStyle:{
                   width: 2,
                   color:"red"
                 },
                 itemStyle: {
                   normal: {
                     label: {
                       show: true,
                       position: 'top',
                       // formatter: '{c}%'
                     }
                   }
                 },
               },*/
            ],
           /* dataZoom: [
              {
                show: true,
                height: 5,
                xAxisIndex: [0],
                bottom: 20,
                showDetail: false,
                showDataShadow: false,
                borderColor: "transparent",
                textStyle: {
                  fontSize: 0
                },
                // startValue:1,
                endValue: 10,//从0开始的相当于5个
                backgroundColor: "rgba(0,0,0,0)",
                borderWidth: 0,
                handleSize: "0%",
                handleStyle: {
                  color: "#d3dee5"
                }
              }
            ]*/

          },
          layout:'total, sizes, prev, pager, next, jumper',
          pagination: {
            total: 0, // 总数
            pageSize: 8, // 页面多少条数据
            currentPage: 1, // 当前在哪页
            pageOptions: [5, 8,10]// 页面选项
          },
          order:"asc"
        }
      },
      methods: {
        lookDetail(data){
          console.log(data)
          let newUrl = data.detailLink
          let a = document.createElement('a');
          a.setAttribute('href', newUrl);
          a.setAttribute('target', '_self');
          // a.setAttribute('download', '结论.pdf'); // 自定义文件名（有效）
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);

        },
        getchartsData(){
          this.loading = true
          let url = `${base}/join/get/summary?type=all&myName=all`
          this.$get(url, {}).then(res => {
            if (res&& res.data.code ==20000){
              this.loading = false
               this.systemCount = res.data.obj.systemCount
               this.caseTotalCount = res.data.obj.caseTotalCount
               this.averagePassRate = res.data.obj.averagePassRate
               let monthData = res.data.obj.monthData
               let x = []
               let y1 = []
               let y2 = []
               monthData.forEach((item)=>{
                x.push(item.month)
                y1.push(item.totalCount)
                let averagePassRate = (item.averagePassRate*100).toFixed(2)
                y2.push(averagePassRate)
               })
              this.option1.xAxis.data = x
              this.option2.xAxis.data = x
              this.option1.series[0].data = y1
              this.option2.series[0].data = y2
              const myChart = echarts.init(document.getElementById("mychart1"));//
              const myChart2 = echarts.init(document.getElementById("mychart2"));//
              //
              myChart.setOption(this.option1);// 渲染页面
              myChart2.setOption(this.option2);// 渲染页面
            }
          })
        },
        getList(){
          // ?pageNum=1&pageSize=10&myOrder=asc
          // let url ="/join/get/month/all/data"
          let url =`${base}/join/get/month/all/data`
          let params = {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.currentPage,
            myOrder:this.order
          }
          this.$get(url, {params}).then(res => {
            if (res&& res.data.code ==20000){
              this.pagination.total = res.data.obj.total*1
              this.tableData = res.data.obj.list || [];
            }
          })
        },
        handleSizeChange(val) {
          console.log(val)
          this.pagination.currentPage = 1
          this.pagination.pageSize = val
          console.log(this.currentPage)
          this.getList()

        },

        handleCurrentChange(val) {
          console.log(val)
          this.pagination.currentPage = val
          this.getList()

        },
        schange({column, prop, order}){
          console.log(column, prop, order)
          console.log(column.property)

          if (order =='ascending'){
              this.order="asc"
          }else if (order =='descending'){
            this.order="desc"
          }else{
            this.order="desc"
          }
          this.getList()
        }
      },

      computed: {

      },
      watch: {

      },
    }
</script>

<style scoped lang="scss">
  .wrapper{
    width: 99%;
    margin: 0 auto;
    /*border: 1px solid #e8e8e8;*/
    /*border-radius: 5px;*/
    height: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item{
      width: 20%;
      height: 140px;
      border: 1px solid #e8e8e8;
      border-radius: 5px;
      /*box-shadow: 3px 3px 3px 1px rgba(224, 200, 209, 0.2);*/
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: bold;
      /*background-color: whitesmoke;*/
      /*background-color: rgba(64, 158, 255, .6);*/
      background-color: rgba(64, 158, 255, .6);
      box-shadow: 0 0 5px 0 ;

      /*background: inherit;*/

      backdrop-filter: blur(10px);

      /*color: wheat;*/
    }
  }
  .el-tag{
    font-size: 17px;
  }
</style>
